<div class="{{option.prefixCls}}-mask {{option.maskTransitionName}}"></div>
<div role="dialog" class="{{option.prefixCls}}-wrap {{option.transitionName}}" (click)="option.maskClose(-1, 0, $event)">
  <div role="document"
       class="{{option.prefixCls}}"
       [ngClass]="showShare(option)">
    <div class="{{option.prefixCls}}-content">
      <button aria-label="Close" class="{{option.prefixCls}}-close">
        <span class="{{option.prefixCls}}-close-x"></span>
      </button>
      <div class="{{option.prefixCls}}-body">
        <div>
          <ng-container *ngIf="!isNoTitle(option.title)">
            <ng-template *ngIf="isTemplateRef(option.title)" [ngTemplateOutlet]="option.title"></ng-template>
            <h3 *ngIf="!isTemplateRef(option.title)" class="{{option.prefixCls}}-title">{{option.title}}</h3>
          </ng-container>
          <ng-container *ngIf="!isNoTitle(option.message)">
            <ng-template *ngIf="isTemplateRef(option.message)" [ngTemplateOutlet]="option.message"></ng-template>
            <div *ngIf="!isTemplateRef(option.message)" class="{{option.prefixCls}}-message">{{option.message}}</div>
          </ng-container>
          <ng-container [ngSwitch]="option.flag">
            <div *ngSwitchCase="'NORMAL'" class="{{option.prefixCls}}-button-list" role="group">
              <ng-container *ngFor="let item of option.options; let i = index;">
                  <div TouchFeedbackDirective class="{{option.prefixCls}}-button-list-item" [className]="setActiveClassName(option, 'button-list-item')">
                      <div *ngIf="option.destructiveButtonIndex !== i && option.cancelButtonIndex !== i"
                           class="{{option.prefixCls}}-button-list-item"
                           (click)="option.onPress(i, 0, $event)"
                      >
                        {{item}}
                      </div>
                      <div *ngIf="option.destructiveButtonIndex === i"
                           class="{{option.prefixCls}}-button-list-item {{option.prefixCls}}-destructive-button"
                           (click)="option.onPress(i, 0, $event)"
                      >
                        {{item}}
                      </div>
                      <div *ngIf="option.cancelButtonIndex === i"
                           class="{{option.prefixCls}}-button-list-item {{option.prefixCls}}-cancel-button"
                           (click)="option.onPress(i, 0, $event)"
                      >
                        {{item}}
                        <span class="{{option.prefixCls}}-cancel-button-mask"></span>
                      </div>
                  </div>
              </ng-container>
            </div>
            <div *ngSwitchCase="'SHARE'" class="{{option.prefixCls}}-share {{option.prefixCls}}-share-content">
              <div *ngIf="!isArray(option.options, option.options[0])" class="{{option.prefixCls}}-share-list">
                <ng-container *ngFor="let item of option.options; let i = index;">
                  <div class="{{option.prefixCls}}-share-list-item" (click)="option.onPress(i, 0, $event)">
                    <div class="{{option.prefixCls}}-share-list-item-icon">
                      <ng-template *ngIf="isTemplateRef(item.icon)" [ngTemplateOutlet]="item.icon"></ng-template>
                      <div *ngIf="!isTemplateRef(item.icon)" [innerHTML]="item.icon | safeHTML"></div>
                    </div>
                    <div class="{{option.prefixCls}}-share-list-item-title">{{item.title}}</div>
                  </div>
                </ng-container>
              </div>
              <ng-container *ngIf="isArray(option.options, option.options[0])">
                <div *ngFor="let items of option.options; let rowIndex = index" class="{{option.prefixCls}}-share-list">
                  <ng-container *ngFor="let item of items; let i = index;">
                    <div class="{{option.prefixCls}}-share-list-item" (click)="option.onPress(i, rowIndex, $event)">
                      <div class="{{option.prefixCls}}-share-list-item-icon">
                        <ng-template *ngIf="isTemplateRef(item.icon)" [ngTemplateOutlet]="item.icon"></ng-template>
                        <div *ngIf="!isTemplateRef(item.icon)" [innerHTML]="item.icon | safeHTML"></div>
                      </div>
                      <div class="{{option.prefixCls}}-share-list-item-title">{{item.title}}</div>
                    </div>
                  </ng-container>
                </div>
              </ng-container>
              <div TouchFeedbackDirective [className]="setActiveClassName(option, 'share-cancel-button')" class="{{option.prefixCls}}-share-cancel-button">{{option.cancelButtonText}}</div>
            </div>
          </ng-container>
        </div>
      </div>
    </div>
  </div>
</div>